<template>
    <el-tabs type="border-card" v-model="activeName">
        <el-tab-pane label="积分明细" name="free">
            <el-row>
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item>
                        <el-select v-model="value" placeholder="请选择">
                            <el-option label="新增" value="shanghai"></el-option>
                            <el-option label="修改" value="beijing"></el-option>
                            <el-option label="兑换" value="beijing"></el-option>
                            <el-option label="任务" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-date-picker
                                v-model="value2"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                        ></el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search"></el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-row>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        border
                        stripe
                        :highlight-current-row="true"
                        :header-cell-style="{ background: '#ededed', color: '#333' }"
                >
                    <el-table-column prop="name" align="center" label="记录日期" />
                    <el-table-column prop="describe" align="center" label="类型" />
                    <el-table-column prop="start" align="center" label="操作人" />
                    <el-table-column prop="out" align="center" label="公司积分" />
                    <el-table-column prop="upTime" align="center" label="奖励积分" />
                    <el-table-column prop="jian" align="center" label="学习积分" />
                    <el-table-column prop="jia" align="center" label="实践积分" />
                    <el-table-column prop="worker" align="center" label="诚信积分" />
                    <el-table-column prop="faTime" align="center" label="备注" />
                    <el-table-column prop="type" align="center" label="剩余积分" />
                </el-table>
            </el-row>

            <el-pagination
                    class="text-right"
                    background
                    :current-page="1"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="0"
            />
        </el-tab-pane>

        <el-tab-pane label="积分排行榜" name="a">
            <el-row>
                <div></div>
            </el-row>
            <el-row>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        border
                        stripe
                        :highlight-current-row="true"
                        :header-cell-style="{ background: '#ededed', color: '#333' }"
                >
                    <el-table-column prop="name" align="center" label="员工名次" />
                    <el-table-column prop="describe" align="center" label="员工工号" />
                    <el-table-column prop="start" align="center" label="员工姓名" />
                    <el-table-column prop="out" align="center" label="总积分" />
                    <el-table-column prop="upTime" align="center" label="工时积分" />
                    <el-table-column prop="upTime" align="center" label="奖励积分" />
                    <el-table-column prop="upTime" align="center" label="惩罚积分" />
                    <el-table-column prop="jian" align="center" label="学习积分" />
                    <el-table-column prop="jia" align="center" label="实践积分" />
                    <el-table-column prop="worker" align="center" label="诚信积分" />
                    <el-table-column prop="upTime" align="center" label="消费积分" />
                    <el-table-column prop="faTime" align="center" label="所属部门" />
                    <el-table-column prop="type" align="center" label="入职时间" />
                </el-table>
            </el-row>

            <el-pagination
                    class="text-right"
                    background
                    :current-page="1"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="0"
            />
        </el-tab-pane>
    </el-tabs>
</template>

<script>
    export default {
        name: 'integral',
        data() {
            return {
                activeName: 'free',
                form: {
                    name: '',
                    describe: '',
                    start: '',
                    out: '',
                    upTime: '',
                    jian: '',
                    jia: '',
                    worker: '',
                    faTime: '',
                    type: '',
                },
                pickerOptions: {
                    shortcuts: [
                        {
                            text: '最近一周',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit('pick', [start, end]);
                            },
                        },
                        {
                            text: '最近一个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                picker.$emit('pick', [start, end]);
                            },
                        },
                        {
                            text: '最近三个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                picker.$emit('pick', [start, end]);
                            },
                        },
                    ],
                },
                value: '',
                value2: '',
            };
        },
        methods: {},
    };
</script>

<style scoped>
    .text-right{
        float: right;
    }
</style>